
<template>
  <div>
    <Modal
      v-model="showBox"
      title="可开票金额明细"
      :footer-hide="true"
      :mask-closable="false"
      @on-visible-change="vChange"
      class-name="vertical-center-modal"
      width="1200"
    >
      
       <Table
        :data="tableData"
        :columns="columns"
        stripe
        border
        class="marginB10"
        :loading="loading"
        :height="$app.winHeight-185"
      ></Table>
      <Row :gutter="15">
        <Col :span="14">
          <Page
            :total="total"
            show-sizer
            show-total
            show-elevator
            size="small"
            :page-size="pageSize"
            :page-size-opts="$app.pageAll.pageSizeOpts"
            :current="page"
            @on-change="loadMore"
            @on-page-size-change="changePageSize"
          ></Page>
        </Col>
        <Col :span="10" class="textRight ">

          <span class="marginR20">
            <span class=" cCCC pointer relative marginR5" style="top:1px;" @click="$app.alert('总金额不含猫币和退款金额')">
              <Icon type="ios-help-circle-outline" size="20"/>
            </span>总金额：<span class="f_18 cBlue f_bold">{{order_total_money}}</span> 元</span>
          <span class="">专利官费：<span class="f_18 cBlue f_bold">{{patent_official_fee}}</span> 元</span>
          <!-- <span class="">退款：<span class="f_18 cBlue f_bold">{{order_refund_money}}</span> 元</span> -->
        </Col>
      </Row>
      

      <!-- <Button type="primary" class="marginB10" size="large" long @click="goFun">确 定</Button> -->
    </Modal>
  </div>
</template>



<script>
export default {
  name: "invoiceCan",
  components: {},
  data() {
    let data = {
      tableData: [],
      columns: [],
      showBox:false,
      order_total_money:0,
      patent_official_fee:0,
      order_refund_money:0
    };
    //分页相关
    let tool = {
      loading: true, //加载时显示转转
      total: 0, // 所有数据条数
      page: 1, // 当前页数
      pageSize: $app.pageAll.pageSize // 默认数据返回条数
    };

    return Object.assign(data, tool); // 对象合并
  },
  mounted() {
    
  },

  methods: {
    getData() {
      let { pageSize, page } = this;

      // 清空原本的数据
      this.loading = true;
      this.columns = [];
      this.tableData = [];

      $ajax.wrctYn({ page, pageSize}, ({ data }) => {
        this.loading = false;

        this.order_total_money=parseFloat(data.order_total_money);
        this.patent_official_fee=parseFloat(data.patent_official_fee);
        this.order_refund_money=parseFloat(data.order_refund_money);

        this.columns = [
          {
            title: " ",
            type: "index",
            width: 30,
            align: "center ",
            className: "goOnTxt c999"
          },
          {
            title: "订单编号",
            key: "order_no",
            className: "goOnTxt",
            resizable: true,
            width: 220
          },
          {
            title: "商品名称",
            key: "goods_name",
            className: "goOnTxt",
            resizable: true
          },
          {
            title: "支付金额(元)",
            className: "goOnTxt",
            resizable: true,
            width: 120,
            render: (h, params) => {
              let type = params.row.type; //1充值,2消费,3收益,4收益提现,5退款
              let money = parseFloat(params.row.money);
              let out = [];
              if (money > 0) {
                out.push(
                  h(
                    "span",
                    {
                      class:
                        "  marginR5 f_bold " +
                        (type == 2 || type == 4 ? " " : " cBlue")
                    },
                    type == 2 || type == 4 ? " " : "(-)"
                  )
                );
              }
              out.push(h("span", money));
              return out;
            }
          },
          {
            title: "支付猫币",
            className: "goOnTxt",
            resizable: true,
            width: 100,
            render: (h, params) => {
              let type = params.row.type; //1充值,2消费,3收益,4收益提现,5退款
              let currency = parseFloat(params.row.currency);
              let out = [];
              if (currency > 0) {
                out.push(
                  h(
                    "span",
                    {
                      class:
                        "  marginR5 f_bold " +
                        (type == 2 || type == 4 ? " " : " cBlue")
                    },
                    type == 2 || type == 4 ? " " : "(-)"
                  )
                );
              }
              out.push(h("span", currency));
              return out;
            }
          },
          {
            title: "可开票金额(元)",
            className: "goOnTxt",
            resizable: true,
            width: 120,
            render: (h, params) => {
              // let type = params.row.type; //1充值,2消费,3收益,4收益提现,5退款
              let bill_money = parseFloat(params.row.bill_money);
              let out = [];
              out.push(h("span",{class:" cRed "}, bill_money));
              return out;
            }
          },
          {
            title: "支付方式",
            key: "pay_type",
            className: "goOnTxt",
            resizable: true,
            width: 120
          },
          {
            title: "支付时间",
            key: "created_at",
            className: "goOnTxt",
            resizable: true,
            width: 160
          },
        ];

        this.tableData = data.list;
        this.total = data.total;
      });
    },
    // 加载更多
    loadMore(page) {
      this.page = page;
      this.getData();
    },
    // 数据返回条
    changePageSize(pageSize) {
      this.page = 1;
      this.pageSize = pageSize;
      this.getData();
    },
    //弹框消失
    vChange(buEr) {
      if(!buEr){
        setTimeout(()=>{
          //初始化数据
          this.tableData=[];
          this.columns=[];
          this.total=0; // 所有数据条数
          this.page=1; // 当前页数
          this.pageSize=$app.pageAll.pageSize; // 默认数据返回条数
        },200);
      }else{
        this.getData();
      }
    }
  }
};
</script>

<style>
</style>
